import './index.scss'
import { useNavigate, useParams } from "react-router-dom"
import { Row, Col, Table, Button, Space, Form, Input, UploadProps, Upload, message, Radio, Select } from 'antd';
import http from '../../../../utils/http';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState, useEffect } from 'react';
const { TextArea } = Input;
const { Option } = Select;
const Details: FC = () => {
  const navigate = useNavigate()
  const { id } = useParams()
  const [basic] = Form.useForm()
  const [basic1] = Form.useForm()
  // 取消按钮: 退出当前页面
  const exitPage = () => {
    navigate('/home/fifth/comprehensiveInquiry')
  }
  // 确认按钮: 获取所有表单数据 
  const getAll = () => {
    // console.log(basic.getFieldsValue())
    console.log(basic1.getFieldsValue())
  }
  // 表单数据
  const [data, setData] = useState<DataType[]>([]);
  const getData = () => {

  }
  useEffect(() => {
    getData()
  }, [])
  // 上传文件
  const picture: UploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  // -----表单----
  interface DataType {
    key: string;
    id1: number
    id2: number
    id3: number
    id4: number
    id5: number
    id6: number
    id7: number
    id8: number
    id9: number
    id10: number
    id11: number
    id12: number
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id1',
      key: 'id1',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '检验项目',
      dataIndex: 'id2',
      key: 'id2',
      align: "center",
      className: 'headerBg'
    },
    {
      title: 'AQL',
      dataIndex: 'id3',
      key: 'id3',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '抽样数',
      key: 'id4',
      dataIndex: 'id4',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '标准',
      key: 'id6',
      dataIndex: 'id6',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '实测值',
      key: 'id7',
      dataIndex: 'id7',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '合格数',
      key: 'id8',
      dataIndex: 'id8',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '不合格数',
      key: 'id9',
      dataIndex: 'id9',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '判定',
      key: 'id10',
      dataIndex: 'id10',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '附件',
      key: 'id11',
      dataIndex: 'id11',
      align: "center",
      className: 'headerBg'
    },
    {
      title: '备注',
      key: 'id12',
      dataIndex: 'id12',
      align: "center",
      className: 'headerBg'
    },
  ];

  return <div className='details'>
    <Form
      name="basic"
      form={basic}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      autoComplete="off"
      layout="inline"
      labelCol={{ span: 8 }}
    >
      <Space size={[120, 10]} wrap>
        <Form.Item label="供应商简称" name="username0">
          <Input size="small" />
        </Form.Item>
        <Form.Item label="送货批次" name="username1">
          <Input size="small" />
        </Form.Item>
        <Form.Item label="送货数量" name="username2">
          <Input size="small" />
        </Form.Item>
        <Form.Item label="物料类型" name="username3">
          <Input size="small" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="物料编码" name="username4">
          <Input size="small" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="物料名称" name="username5">
          <Input size="small" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 4 }} label="图号" name="username6">
          <Input size="small" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 2 }} label="图纸版本号" name="username7">
          <Input size="small" />
        </Form.Item>
        <Row justify='space-between' >
          <Col>
            <Form.Item label="厂家MLOT" name="yingxiang1">
              <Input size="small" style={{ width: '600px' }} />
            </Form.Item>
          </Col>
          <Col>
            <Form.Item label="物料LPN" name="yijian2">
              <Input size="small" style={{ width: '600px' }} />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item labelCol={{ offset: 1 }} label="检验规范" name="username7">
          <Button type="link" >1111</Button>
        </Form.Item>
        <br />
        <Form.Item labelCol={{ offset: 4 }} label="检验员" name="username8">
          <Input size="small" />
        </Form.Item>
        <br /><br /><br /><br /><br /><br />
        <Form.Item label="检验员结论" name="username9">
          <Input size="small" />
        </Form.Item>
        <Form.Item label="缺陷类别" name="username10">
          <Input size="small" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 1 }} label="厂家报告">
          <Button type='link'>点击查看</Button>
        </Form.Item>
        <br /><br /><br />
        <Form.Item label="不良描述" name="username12">
          <TextArea rows={4} placeholder="请输入描述" />
        </Form.Item>
        <Form.Item labelCol={{ offset: 3 }} label="备注" name="username13">
          <TextArea rows={4} placeholder="备注" />
        </Form.Item>
        <Row justify='space-between'>
        <Col span={4}>
          <Form.Item label="反馈单号" name="username14">
            <Input size="small" />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="检验周期" name="username15">
            <Input size="small" />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="派单周期" name="username16">
            <Input size="small" />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="出单时间" name="username17">
            <Input size="small" />
          </Form.Item>
        </Col>
      </Row>
      </Space>
      
    </Form>
    <div className="tit">检验报告</div>
    <hr />
    <Table pagination={false} size="small" rowKey={(record) => record.key} columns={columns} dataSource={data} bordered />
    <div className="tit">审核</div>
    <hr />
    <Form
      name="basic1"
      form={basic1}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      autoComplete="off"
    >
      <Row justify='start'>
        <Col>
          <Form.Item label="检验结论" name="shuliang1">
            <Input />
          </Form.Item>
        </Col>
      </Row>
    </Form>
    <Row justify="center">
      <Col span={2}>
        <Button onClick={exitPage} type='primary'>返回</Button >
      </Col>
      <Col span={2}>
        <Button onClick={getAll} type='primary'>导出</Button>
      </Col>
    </Row>
  </div>
}

export default Details